<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LuckDog 浏览器示例</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .result-section {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    h2 {
      margin-top: 0;
      color: #333;
    }
    .code {
      font-family: monospace;
      background-color: #f5f5f5;
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 10px;
    }
    .result {
      font-weight: bold;
      color: #2c3e50;
    }
  </style>
</head>
<body>
  <h1>LuckDog 工具库 - 浏览器直接使用示例</h1>
  
  <div class="result-section">
    <h2>字符串工具演示</h2>
    <div class="code">const longText = '这是一个很长的文本，需要被截断';</div>
    <div>原始文本: <span id="original-text" class="result"></span></div>
    <div>截断后(10字符): <span id="truncated-10" class="result"></span></div>
    <div>截断后(5字符，自定义后缀): <span id="truncated-5" class="result"></span></div>
    <div>字符串是否为空: <span id="has-blank-1" class="result"></span></div>
    <div>多个字符串是否有空: <span id="has-blank-2" class="result"></span></div>
  </div>

  <div class="result-section">
    <h2>数组工具演示</h2>
    <div class="code">const duplicatedArray = [1, 2, 2, 3, 3, 4, 5, 5];</div>
    <div>原始数组: <span id="original-array" class="result"></span></div>
    <div>去重后: <span id="unique-array" class="result"></span></div>
    <div>随机元素: <span id="random-element" class="result"></span></div>
  </div>

  <div class="result-section">
    <h2>验证工具演示</h2>
    <div class="code">const emails = ['test@example.com', 'invalid-email', 'another@domain.com'];</div>
    <div id="email-results"></div>
  </div>

  <!-- 方式1: 通过 CDN 直接引入 UMD 版本 -->
  <!-- 在实际使用时，应该替换为实际的 CDN 链接 -->
  <script src="../dist/luckdog.umd.js"></script>
  
  <script>
    // 通过全局变量 luckdog 使用
    document.addEventListener('DOMContentLoaded', function() {
	
	console.log(luckdog.charPool.UNDERLINE)
      // 字符串工具演示
      const longText = '这是一个很长的文本，需要被截断';
      document.getElementById('original-text').textContent = longText;
      document.getElementById('truncated-10').textContent = luckdog.strUtil.truncate(longText, 10);
      document.getElementById('truncated-5').textContent = luckdog.strUtil.truncate(longText, 5, '...');
      document.getElementById('has-blank-1').textContent = luckdog.strUtil.hasBlank('');
      document.getElementById('has-blank-2').textContent = luckdog.strUtil.hasBlank('hello', 'world', '');

      // 数组工具演示
      const duplicatedArray = [1, 2, 2, 3, 3, 4, 5, 5];
      document.getElementById('original-array').textContent = duplicatedArray;
      document.getElementById('unique-array').textContent = luckdog.arrUtil.unique(duplicatedArray);
      document.getElementById('random-element').textContent = luckdog.arrUtil.random(duplicatedArray);

      // 验证工具演示
      const emails = ['test@example.com', 'invalid-email', 'another@domain.com'];
      const emailResultsEl = document.getElementById('email-results');
      
      emails.forEach(email => {
        const isValid = luckdog.validUtil.isValidEmail(email);
        const div = document.createElement('div');
        div.innerHTML = `"${email}" 是否为有效邮箱: <span class="result">${isValid}</span>`;
        emailResultsEl.appendChild(div);
      });
    });
  </script>
</body>
</html> 